<template>
  <div class="pickup-select">
    <div class="pickup-wrap">
      <!-- 选择提货点 -->
      <van-cell @click="onClick(1)" is-link>
        <template #title>
          <van-tag color="#EBF1FF" text-color="#105CFB">{{ t('pickupSelect_pickup') }}</van-tag>
          <span class="custom-title">{{ pickSiteName }}</span>
          <div class="custom-site">{{ pickSiteAddress }}</div>
        </template>
      </van-cell>
      <!-- 选择提货人 -->
      <div class="picker-info" v-show="showPicker" @click="onClick(2)">
        <span class="picker-title">{{ t('pickupSelect_consignee') }}</span>
        <span class="right" v-if="picker && Object.keys(picker).length !== 0">
          <span class="picker-name">{{ picker.picker }}</span>
          <span class="picker-contact">{{ formatPhone(picker) }}</span>
          <van-icon name="arrow" />
        </span>
        <span class="right" v-else>
          <span class="picker-contact" @click.stop="onClick(3)">{{ t('pickupSelect_create_consignee_information') }}</span>
          <van-icon name="arrow" />
        </span>
      </div>
    </div>
    <template v-if="openNewPop">
      <!-- 弹框 -->
      <van-popup v-model="showPopup" :close-on-click-overlay="false" position="bottom" round :style="{ height: '70%' }">
        <!-- 顶部 -->
        <div class="popup-header">
          <div class="popup-header-title">{{ sheetInfo.title }}</div>
          <i class="van-icon van-icon-arrow-left van-action-sheet__left" v-show="sheetInfo.showBack"
             @click="backClick"></i>
          <i class="van-icon van-icon-cross van-action-sheet__close" v-show="sheetInfo.showClose" @click="onClick"></i>
        </div>
        <!-- 内容 -->
        <div class="popup-cont">
          <select-site v-if="showSite" @onClick="onClick" @setPickSiteInfo="setPickSiteInfo"></select-site>
          <choose-picker v-if="showChoosePicker" :picker="picker" :picker-list="pickerList" @pickerSelect="pickerSelect"
                         @newPicker="newPicker"></choose-picker>
          <edit-pickInfo v-if="showEditPicker" :pickerUserInfo="editPickerInfo" :updatePickerId="updatePickerId" @pickerSelect="pickerSelect"
                         @onClick="onClick" @getPicker="getPicker"></edit-pickInfo>
        </div>
      </van-popup>
    </template>
    <template v-else>
      <div class="fixed-cont" v-if="showSite || showChoosePicker || showEditPicker">
        <!-- 顶部 -->
        <div class="popup-header">
          <div class="popup-header-title">{{ sheetInfo.title }}</div>
          <i class="van-icon van-icon-arrow-left van-action-sheet__left"
             @click="onClick"></i>
        </div>
        <div class="content-box">
          <select-site v-if="showSite" @onClick="onClick" @setPickSiteInfo="setPickSiteInfo"></select-site>
          <choose-picker v-if="showChoosePicker" :picker="picker" :picker-list="pickerList" @pickerSelect="pickerSelect"
                         @newPicker="newPicker"></choose-picker>
          <edit-pickInfo v-if="showEditPicker" :pickerUserInfo="editPickerInfo" :updatePickerId="updatePickerId" @pickerSelect="pickerSelect"
                         @onClick="onClick" @getPicker="getPicker"></edit-pickInfo>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import ChoosePicker from "./ChoosePicker.vue";
import SelectSite from "../SelectSite";
import editPickInfo from "./editPickInfo.vue";
import locale from '../../../../mixins/locale'
import { Cell, Tag ,Icon } from 'vant'

export default {
  name: 'PickupSelect',
  props: {
    pickInfo: Object,//自提信息，包括自提人(picker)和自提点(site)
    pickerList: {//自提人选项
      type: Array,
      default: () => []
    },
    isPromoterPicksUp: {
      type: Boolean,
      default: false
    },
    openNewPop: {
      type: Boolean,
      default: true
    },
    showPicker: {
      type: Boolean,
      default: true
    }
  },
  mixins: [locale],
  data() {
    return {
      showPopup: false,
      sheetInfo: {
        title: '',
        showClose: true,
        showBack: false,
      },
      showSite: false,
      showChoosePicker: false,
      showEditPicker: false,
      editPickerInfo: {}, // 需要修改的自提人信息
      updatePickerId: '', // 需要修改的自提人id
      // showPicker: true,
    }
  },
  // mounted() {
  //   // 提货人白名单
  //   if (window.is_hide_self_picker_info && window.is_hide_self_picker_info == 2) {
  //     this.showPicker = false;
  //   }
  // },
  components: {
    ChoosePicker,
    SelectSite,
    editPickInfo,
    [Cell.name] : Cell,
    [Tag.name] : Tag,
    [Icon.name] : Icon
  },
  computed: {
    site() {
      return this.pickInfo?.site;
    },
    picker() {
      return this.pickInfo?.picker;
    },
    pickSiteName() {
      return this.site?.place_name || this.t('pickupSelect_pickup_address');
    },
    pickSiteAddress() {
      const { province, city, county, detail } = this.site || {};
      return province ? `${province}${city}${county}${detail}` : "";
    }
  },
  methods: {
    getPicker() {
      this.$emit('getPicker');
    },
    newPicker(item) {
      if (item) {
        this.editPickerInfo = item;
        this.updatePickerId = item.id;
        this.handlePopuoInfo(this.t('pickupSelect_edit'), true, true, false, false, true);
      } else {
        this.editPickerInfo = {};
        this.updatePickerId = '';
        this.handlePopuoInfo(this.t('pickupSelect_add'), true, true, false, false, true);
      }
    },
    // 选择了提货人
    pickerSelect(item) {
      this.$emit('picker-select', item);
      this.onClick();
    },
    // 格式化电话号码展示
    formatPhone(item) {
      if (item.currentArea && (item.currentArea.nation_code === '86' || item.currentArea.nation_code === '')) {
        return item.picker_contact
      }
      return `${item.currentArea.nation_code}-${item.picker_contact}`
    },
    setPickSiteInfo(pickSiteInfo) {
      this.$emit('setPickSiteInfo', pickSiteInfo);
    },
    onClick(type) {
      switch (type) {
        case 1:
          // 推广员自提 - 不支持修改自提点
          if (this.isPromoterPicksUp) break
          this.handlePopuoInfo(this.t('collectionAddress_select_pickUp_point'), true, false, true);
          break;
        case 2:
          this.handlePopuoInfo(this.t('collectionAddress_choose_consignee'), true, false, false, true);
          break;
        case 3:
          this.newPicker();
          break;
        default:
          this.handlePopuoInfo('', true, false, false);
      }
      // 推广员自提 - 不支持修改自提点
      if (type === 1 && this.isPromoterPicksUp) return;
      this.showPopup = !this.showPopup;
    },
    handlePopuoInfo(title, showClose, showBack, showSite = false, showChoosePicker = false, showEditPicker = false) {
      this.sheetInfo = {
        title,
        showClose,
        showBack,
      };
      this.showSite = showSite;
      this.showChoosePicker = showChoosePicker;
      this.showEditPicker = showEditPicker;
    },
    backClick() {
      this.handlePopuoInfo(this.t('collectionAddress_choose_consignee'), true, false, false, true);
    },
  },
  watch:{
    showSite(val){
      if(val && !this.showEditPicker && !this.showChoosePicker){
        this.$parent?.handleOrderBarShow(false);
      }else{
        this.$parent?.handleOrderBarShow(true);
      }
    },
    showChoosePicker(val){
      if(val && !this.showEditPicker && !this.showSite){
        this.$parent?.handleOrderBarShow(false);
      }else{
        this.$parent?.handleOrderBarShow(true);
      }
    },
    showEditPicker(val){
      if(val && !this.showChoosePicker && !this.showSite){
        this.$parent?.handleOrderBarShow(false);
      }else{
        this.$parent?.handleOrderBarShow(true);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global.scss";
@import "../../assets/styles/common.scss";
.pickup-select {
  .popup-header {
    width: 100%;
    max-width: 480px;
    position: fixed;
    z-index: 1;
    top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.24rem 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.32rem 0.32rem 0 0;
    min-height: 0.48rem;

    .popup-header-title {
      font-weight: 600;
      line-height: 0.48rem;
    }

    .van-action-sheet__left {
      position: absolute;
      top: 0.32rem;
      left: 0.32rem;
      color: #aaaaaa;
      font-size: 0.32rem;
    }

    .van-action-sheet__close {
      position: absolute;
      top: 0.32rem;
      right: 0.32rem;
      color: #aaaaaa;
      font-size: 0.32rem;
      padding: 0 !important;
    }
  }

  .popup-cont {
    padding-top: 0.96rem;
  }

  .pickup-wrap {
    margin-bottom: .18rem;

    .custom-title {
      margin-left: 8px;
    }

    .picker-info {
      padding: .28rem .32rem;
      font-size: 0.28rem;
      font-weight: 400;
      background-color: #fff;
      display: flex;
      justify-content: space-between;

      .van-icon-arrow {
        margin-left: 0.2rem;
        color: #969799;
        font-size: 0.34rem;
      }

      .picker-name {
        margin-right: 0.1rem;
        display: inline-block;
        margin-right: 0.1rem;
        max-width: 2.6rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .picker-title {
        display: inline-block;
        width: 1.12rem;
      }

      .right {
        display: flex;
        align-items: center;
      }
    }
  }

  .picker-info {
    font-size: .28rem;
    font-weight: 400;
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .van-icon-arrow {
      margin-left: 0.8px;
      color: #969799;
      font-size: 0.34rem;
    }
  }
}


.fixed-cont{
  position: fixed;
  box-sizing: border-box;
  z-index: 2;
  bottom: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 80%;
  border-radius: 0.32rem 0.32rem 0 0;
  overflow: auto;

  .content-box{
    padding-top: 0.96rem;

  }
}
</style>
